<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta  http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>keyframes动画进阶</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="animate.css"/>
		<style type="text/css">
			/* 关键字动画 */
			/* 	@keyframes bounce-in{
					0% {
						transform: scale(0);
					}
					50% {
						transform: scale(1.5);
					}
					100% {
						transform: scale(1);
					}
				} */
				/* 在标签上将样式变成enter-active,leave-active标签 */
				/* .active {animation: bounce-in 1s; transform-origin: left center;} */
				/* .leave{animation: bounce-in 1s reverse; transform-origin: left center; */
				
				
				/* 同时使用过度transition和css3动画animation */
				.fade2-enter, .fade2-leave-to { opacity: 0; }
				.fade2-enter-active, .fade2-leave-active { transition: opacity 3s; }
		</style>
	</head>
	<body>
		<div id="root">
			<!-- 用animated初始化animation.css库，后面是特定的css动画，可以对标 https://daneden.github.io/animate.css/ -->
			<!-- enter-active-class是enter-active的样式 -->
			<!-- leave-active-class是leave-active的样式 -->
			<!-- 页面刷新时显示动画：appear appear-active-class -->
			<!-- type = "transition" 以transition动画的时长为总时长 -->
			<!-- :duration = "10000" 手动设置总时长，优先级高于type -->
			<!-- :duration = "{enter: 400, leave: 2000}" 手动设置总时长，将切入和切出分开定，优先级最高 -->
			<transition 
				type = "transition" 
				:duration = "500"
				:duration = "{enter: 400, leave: 2000}"
				name="fade2"  
				appear 
				appear-active-class="animated shake" 
				enter-active-class="animated shake fade2-enter-active" 
				leave-active-class="animated shake fade2-leave-active"
			>
				<div v-if = "show">hello world</div>
			</transition>
			<button type="button" @click="handleClick()">toggle</button>
		</div>
	</body>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#root",
				data:{
					show: true
				},
				methods:{
					handleClick: function () {
						this.show = !this.show;
					}
				}
			})
		</script>
</html>
